<template>
  <div>
    <Card class="w-1/2 !m-10px min-w-700px">
      <template #title>
        <div class="flex flex-col">
          <span class="text-2xl">属性</span>
          <span class="text-gray-400">{{ userInfo.email }}</span>
        </div>
      </template>
      <Form layout="vertical" :model="userInfo" ref="profileForm">
        <FormItem
          label="电子邮箱"
          name="email"
          :rules="[{ type: 'email', message: '请输入正确的邮箱地址' }]"
          required
        >
          <Input v-model:value="userInfo.email" @change="handlechange" />
        </FormItem>
        <FormItem label="名字" name="firstName">
          <Input v-model:value="userInfo.firstName" @change="handlechange" />
        </FormItem>
        <FormItem label="姓氏" name="lastName">
          <Input v-model:value="userInfo.lastName" @change="handlechange" />
        </FormItem>
        <FormItem
          label="首页仪表盘"
          :name="['additionalInfo', 'homeDashboardId']"
          v-if="userInfo.authority !== 'SYS_ADMIN'"
        >
          <Select
            v-model:value="userInfo.additionalInfo.homeDashboardId"
            :options="dashBoardsList"
            :allowClear="true"
            placeholder="请选择"
            @change="handlechange"
          />
        </FormItem>
        <FormItem
          :name="['additionalInfo', 'homeDashboardHideToolbar']"
          v-if="userInfo.authority !== 'SYS_ADMIN'"
        >
          <Checkbox
            v-model:checked="userInfo.additionalInfo.homeDashboardHideToolbar"
            @change="handlechange"
            >隐藏首页仪表板工具栏</Checkbox
          >
        </FormItem>
        <FormItem>
          <Button type="primary" class="float-right" @click="save" :disabled="!isEdit">保存</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { useUserStore } from '/@/store/modules/user';
  import { Card, Form, FormItem, Input, Select, Checkbox, Button } from 'ant-design-vue';
  import { onMounted, ref } from 'vue';
  import { findDashboard, findCusDashboard, postProfile } from '/@/api/thingsborad/account/account';
  import type { UserInfo } from '/#/store';
  import _ from 'lodash';
  const userStore = useUserStore();
  let userInfo = ref<UserInfo>(_.cloneDeep(userStore.getUserInfo));
  let dashBoardsList = ref<Recordable[]>([]);
  let profileForm = ref<any>();
  let isEdit = ref<boolean>(false);
  onMounted(async () => {
    await getDashboards();
  });
  //获取仪表盘数据
  async function getDashboards() {
    let params = {
      pageSize: 10,
      page: 0,
      sortProperty: 'title',
      sortOrder: 'ASC',
    };
    let data: any = {};
    if (userInfo.value.authority === 'SYS_ADMIN') {
      return;
    } else if (userInfo.value.authority === 'TENANT_ADMIN') {
      data = await findDashboard(params);
    } else if (userInfo.value.authority === 'CUSTOMER_USER') {
      let id = userInfo.value.customerId.id;
      data = await findCusDashboard(id, params);
    }
    dashBoardsList.value = data.data.map((item) => {
      return {
        label: item.name,
        value: item.id.id,
      };
    });
  }

  function handlechange() {
    isEdit.value = true;
  }
  async function save() {
    await profileForm.value.validate();
    userInfo.value.name = userInfo.value.email;
    await postProfile(userInfo.value);
    userStore.setUserInfo(userInfo.value);
    isEdit.value = false;
  }
</script>
